<template>
	<view class="">
		<!-- 导航栏 -->
		<view class="navTabBox">
			<view class="acea-row row-middle row-between category-box" style="flex-wrap: wrap;">
				<view class="longTab" :style="isOpenSx?'':'width: 100%'">
					<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
						:scroll-left="tabLeft" show-scrollbar="true">
						<view class="longItem" :style='"width:"+isWidth+"px"' :data-index="index"
							:class="index==categoryon?'click':''" v-for="(item,index) in categoryList" :key="index"
							:id="'id'+index" @click="longClick(index,item.type)">{{item.name}}</view>
						<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
							<view class="underline"></view>
						</view>
					</scroll-view>
				</view>
				<view style="padding-bottom: 8rpx;" v-if="isOpenSx">
					<zdyFilter :styles="sty" :categories="categories" @confirm="confirm" ref="zdyf"
						@openFilter="$emit('openFilter')" @closeFilter="$emit('closeFilter')"></zdyFilter>
				</view>

				<!-- <view class="acea-row row-middle filtration" @click="filterClick()">
					<view class="text line1">筛选</view>
					<view class="sanjiao"></view>
				</view>	 -->
			</view>
			<!-- <view class="sort-box">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
					<view v-for="(item,index) in sortList" :key="index" :class="['sort',sortOn==index?'sort-on':'']"
						@click="sortOn=index">{{item}} 1</view>
				</scroll-view>
			</view> -->
		</view>
		<!-- 筛选 -->
		<!-- <view class="filtrate-box"
			:style="{backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}" v-if="filtrateShow">
			<view class="aside">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item" v-for="(item,index) in filtrateArr" :key="index"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+4+'rpx','color':(currentFiltrateAsideIndex==index)?activeColor:itemTextColor}" @tap.stop="currentFiltrateAsideIndex=index">{{item.type}}</view>
				</scroll-view>
			</view>
			<view class="conter">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="conter-title" :style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
						{{filtrateArr[currentFiltrateAsideIndex].type}}
					</view>
					<view :class="['dropdown-item',currentFiltrateConterIndex==index?'on':'']" 
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(currentFiltrateConterIndex==index)?activeColor:itemTextColor}"
					  v-for="(item,index) in filtrateConterArr[currentFiltrateAsideIndex]" :key="index" @tap.stop="currentFiltrateConterIndex=index">{{item}}</view>
				</scroll-view>
			</view>
			<view class="acea-row row-middle row-between filtrate-btn">
				<view class="reset" @tap.top="filtrateReset()">重置</view>
				<view class="confirm" @tap.top="filtrateConfirm()">确认</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import zdyFilter from '@/pages/others/components/zdyFilter/index.vue'
	import {
		classificationList
	} from "@/api/subletOfShop.js";
	export default {
		name: 'navtab-filter',
		components: {
			zdyFilter
		},
		data() {
			return {
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				// categoryon: 0,
				itemHeight: 88,
				itemPadding: 24,
				itemFontSize: 28,
				bgcolor: '#fff',
				activeColor: '#ee212d',
				itemTextColor: '#666',
				barTextColor: '#383838',
				// 筛选
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: 0,
				show: false,
				filtrateShow: false,
				sty: {
					'paddingBottom': '29rpx'
				},
				// 筛选数组
				filtrateArr: [{
						type: '面积',
						list: ['1号线', '2号线']
					},
					{
						type: '区域',
						list: ['岳麓区', '天心区', '开福区', '雨花区']
					}
				],
				filtrateConterArr: [
					['1号线', '2号线', '3号线', '4号线', '5号线', '6号线', '7号线', '2号线', '2号线'],
					['岳麓区', '天心区', '开福区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区雨花区雨花区雨花区雨花区雨花区雨花区', '雨花区', '雨花区']
				],
			};
		},
		props: {
			categoryon: {
				type: Number | String,
				default: () => {
					return 0
				}
			},
			isOpenSx:{
				typeof: Boolean,
				default: true
			},
			categoryList: {
				type: Array,
				default: () => {
					return []
				}
			},
			categories: {
				type: Array,
				default: () => ([{
						name: '面积',
						type: 'split',
						splitAttr: 'value',
						splitKey: 'areaRange',
						splitKeys: 'areaRanges',
						subCategories: [{
								name: '不限',
								value: ''
							}, {
								name: '20-50㎡',
								value: '20-50'
							},
							{
								name: '50-100㎡',
								value: '50-100'
							},
							{
								name: '100-150㎡',
								value: '100-150'
							},
							{
								name: '200-300㎡',
								value: '200-300'
							},
							{
								name: '300-500㎡',
								value: '300-500'
							},
							{
								name: '500㎡以上',
								value: '500-1000'
							}
						]
					},
					{
						name: '价格',
						type: 'split',
						splitAttr: 'value',
						splitKey: 'rentRange',
						splitKeys: 'rentRanges',
						subCategories: [{
								name: '不限',
								value: ''
							},
							{
								name: '0-500',
								value: '0-500'
							},
							{
								name: '500-1000',
								value: '500-1000'
							},
							{
								name: '1000-1500',
								value: '1000-1500'
							},
							{
								name: '2000-2500',
								value: '2000-2500'
							},
							{
								name: '2500-3000',
								value: '2500-3000',
							},
							{
								name: '3000以上',
								value: '3000-100000'
							}
						]
					}
				])
			}
		},
		mounted() {
		
		},
		watch: {
			categoryon(val) {
				let index = val;
				if (this.categoryList.length >= 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.$nextTick(() => {
						this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
					})
				}
				this.isLeft = this.categoryon * this.isWidth //设置下划线位置
				console.log('this.isLeft',this.isLeft)
			}
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 5
				}
			})

		},
		mounted(){
			this.isLeft = this.categoryon * this.isWidth
		},
		methods: {
			filterClick() {
				this.show = !this.show;
				this.filtrateShow = true
			},
			reset(){
				this.$refs.zdyf.reset();
			},
			filtrateConfirm() {
				// if (this.isNeedChangeTitle) {
				// 	this.updateArr.splice(this.currentIndex, 1, this.aceaConterArr[this.currentFiltrateAsideIndex][this.currentFiltrateConterIndex])
				// }
				this.show = false
				this.filtrateShow = false
			},
			confirm(d) {
				let params = {}
				if (d.data) {
					for (let k in d.data) {
						let c = this.categories[k];
						if (c.type == 'split') {
							params[c.splitKey] = d.data[k][c.splitAttr]?d.data[k][c.splitAttr].split('-')[0] : ''
							params[c.splitKeys] = d.data[k][c.splitAttr]?d.data[k][c.splitAttr].split('-')[1] : ''
						} else if (c.type == 'Array') {
							params[c.attr] = d.data[k].map(item => item[c.val]).join()
						}else{
							if(c.isMu){
								params[c.attr] = d.data[k]?d.data[k].map(item => item[c.val]).join():''
							}else{
								params[c.attr] = d.data[k]?d.data[k][c.val]:''
							}
							
						} 
					}
				}
				console.log(d)
				this.$emit('toSearch', params)
			},
			filtrateReset() {
				this.show = false
				this.filtrateShow = false
			},
			longClick(index, type) {
				if (this.categoryList.length >= 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.isLeft = index * this.isWidth //设置下划线位置
				this.$emit('changecategoryon', {
					index,
					type
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.navTabBox {
		background: #ffffff;
		padding: 0 24rpx;

		.category-box {
			color: rgba(50, 50, 51, 1);
			font-size: 32rpx;
			font-weight: 500;

			.click {
				color: rgba(238, 33, 45, 1);
			}

			.longTab {
				width: 86%;
				/* #ifdef H5 */
				padding-bottom: 20rpx;
				/* #endif */
				/* #ifdef MP */
				padding-top: 20rpx;
				padding-bottom: 20rpx;

				/* #endif */
				.longItem {
					height: 50upx;
					display: inline-block;
					line-height: 50upx;
					text-align: center;
					font-size: 32rpx;

					&.click {
						font-weight: bold;
					}
				}

				.underlineBox {
					height: 3px;
					width: 20%;
					display: flex;
					align-content: center;
					justify-content: center;
					transition: .5s;

					.underline {
						width: 33rpx;
						height: 4rpx;
						background-color: rgba(238, 33, 45, 1);
					}
				}
			}
		}

		.filtration {
			margin-left: 18rpx;
			padding: 12rpx 0 16rpx;

			.text {
				width: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}

			.sanjiao {
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-top-color: rgba(128, 128, 128, 1);
				border-bottom-width: 0;
			}
		}
	}

	.sort-box {
		width: 100%;
		padding: 12rpx 0 0;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			padding: 12rpx 36rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			margin-right: 18rpx;
		}

		.sort-on {
			color: #ffffff;
			background: rgba(238, 33, 45, 1);
		}
	}

	/* 筛选 */
	.bg-mask {
		position: fixed;
		top: 220rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		// z-index: 90;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.filtrate-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 1999;
	}

	.filtrate-box .aside {
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.filtrate-box .aside .dropdown-item {
		height: 88rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter {
		height: calc(100% - 100rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 24rpx 14rpx;
	}

	.filtrate-box .conter .dropdown-item {
		display: inline-block;
		width: 46%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter .dropdown-item:nth-child(2n) {
		margin-right: 18rpx;
	}

	.filtrate-box .conter .conter-title {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.filtrate-box .conter .dropdown-item.on {
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}

	.filtrate-box .filtrate-btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.filtrate-box .filtrate-btn .reset {
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}

	.filtrate-box .filtrate-btn .confirm {
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}
</style>